<template>
  <div :class="$style.buyModal">
    <div :class="$style.topBlock">
      <img :class="$style.topIcon" src="/eurusd2.png" alt="" />
      <div :class="$style.topInfo">
        <div :class="$style.topName">EURUSD</div>
        <div :class="$style.topNum">
          <span :class="$style.topSpan1">1.07254</span>
          <span :class="$style.topSpan2">-0.00028</span>
        </div>
      </div>
      <img :class="$style.topCollect" :src="collectFlag?'/collect1.png':'/collect2.png'" alt="" @click="changeCollect" />
    </div>
    <div :class="$style.countBlock">
      <div :class="$style.countLi">
        <div :class="$style.countText">最高</div>
        <div :class="$style.countNum">1.07302</div>
      </div>
      <div :class="$style.countLi">
        <div :class="$style.countText">最低</div>
        <div :class="$style.countNum">1.07181</div>
      </div>
      <div :class="$style.countLi">
        <div :class="$style.countText">开盘</div>
        <div :class="$style.countNum">1.07282</div>
      </div>
      <div :class="$style.countLi">
        <div :class="$style.countText">总量</div>
        <div :class="$style.countNum">-</div>
      </div>
    </div>
    <div :class="$style.tabBlock">
      <div :class="[$style.tabItem, tabIndex == 0 ? $style.tabActive : '']" @click="changeTab(0)">合约</div>
      <div :class="[$style.tabItem, tabIndex == 1 ? $style.tabActive : '']" @click="changeTab(1)">期权</div>
    </div>
    <div>
      <template v-if="tabIndex == 0">
        <div :class="$style.typeBox">
          <div :class="[$style.typeItem, typeIndex1 == 0 ? $style.typeActive1 : '']" @click="changeType1(0)">买入</div>
          <div :class="[$style.typeItem, typeIndex1 == 1 ? $style.typeActive1 : '']" @click="changeType1(1)">卖出</div>
        </div>
        <div :class="$style.formBox1">
          <div :class="$style.formLabel">手数(0.01 ~ 1100000)</div>
          <lay-input-number v-model="form1.num1" :min="0.01" :max="1100000"></lay-input-number>
          <div :class="$style.formTitle">
            <div :class="$style.formLabel">止损</div>
            <lay-switch v-model="form1.flagA" size="xs"></lay-switch>
          </div>
          <lay-input-number v-model="form1.num2" :disabled="!form1.flagA"></lay-input-number>
          <div :class="$style.formTitle">
            <div :class="$style.formLabel">止盈</div>
            <lay-switch v-model="form1.flagB" size="xs"></lay-switch>
          </div>
          <lay-input-number v-model="form1.num3" :disabled="!form1.flagB"></lay-input-number>
          <div :class="$style.formLabel">杠杆</div>
          <lay-input-number v-model="form1.num4"></lay-input-number>
          <div :class="$style.formText">
            <div :class="$style.formTextBox">
              <span :class="$style.formTextSpan1">手续费：</span>
              <span :class="$style.formTextSpan2">1.07254</span>
            </div>
            <div :class="$style.formTextBox">
              <span :class="$style.formTextSpan1">保证金：</span>
              <span :class="$style.formTextSpan2">21.4508</span>
            </div>
          </div>
          <lay-button class="red" @click="submitForm1">{{ typeIndex1 == 0 ? '买入' : '卖出' }}</lay-button>
          <div :class="$style.formTip">可用余额不足</div>
        </div>
      </template>
      <template v-else>
        <div :class="$style.typeBox">
          <div :class="[$style.typeItem, typeIndex2 == 0 ? $style.typeActive1 : '']" @click="changeType2(0)">买涨</div>
          <div :class="[$style.typeItem, typeIndex2 == 1 ? $style.typeActive2 : '']" @click="changeType2(1)">买空</div>
        </div>
        <div :class="$style.formBox2">
          <div :class="$style.formLabel">金额</div>
          <div :class="$style.chooseBox">
            <div :class="[$style.chooseItem,$style.chooseItem1,moneyIndex==index?$style.chooseActive:'']" v-for="(item,index) in moneyList" :key="index" @click="changeMoney(index)">
              {{ item }}
            </div>
          </div>
          <div :class="$style.formLabel">时长</div>        
          <div :class="$style.chooseBox">
            <div :class="[$style.chooseItem,$style.chooseItem2,timeIndex==index?$style.chooseActive:'']" v-for="(item,index) in timeList" :key="index" @click="changeTime(index)">
              {{ item }}
            </div>
          </div>
          <div :class="$style.formText">
            <div :class="$style.formTextBox">
              <span :class="$style.formTextSpan1">手续费：</span>
              <span :class="$style.formTextSpan2">1</span>
            </div>
          </div>
          <lay-button :class="typeIndex2 == 0 ?'red':'green'" @click="submitForm2">{{ typeIndex2 == 0 ? '买涨' : '买空' }}</lay-button>
          <div :class="$style.formTip">可用余额不足</div>
        </div>
      </template>
    </div>
  </div>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
  name: "BuyModal",
  data() {
    return {
      collectFlag:false,
      tabIndex: 0,
      typeIndex1: 0,
      typeIndex2: 0,
      form1: {
        num1: 0.01,
        num2: 0,
        num3: 0,
        num4: 0,
        flagA: false,
        flagB: false,
      },
      moneyList:['1000','5000','10000','50000','全部资金','其他金额'],
      moneyIndex:0,
      timeList:['300s','600s','900s','1800s'],
      timeIndex:0,
    };
  },
  methods: {
    submitForm2() {
      // let that = this;
      // let para = {
      //   nickName: that.formData.nickName,
      //   avatar: that.formData.avatar,
      // }
      // let loadIndex = that.$layer.load();
      // that.$axios.post('', para).then((res) => {
      //   that.$layer.close(loadIndex);
      //   that.$layer.msg(res.data.message, { time: 1000 });
      //   if (res.data.code != 200) {
      //     return;
      //   }
      // }).catch((err) => {
      //   that.$layer.close(loadIndex);
      //   that.$layer.msg('提交失败,请重试', { time: 1000 });
      // });
    },
    submitForm1() {
      // let that = this;
      // let para = {
      //   nickName: that.formData.nickName,
      //   avatar: that.formData.avatar,
      // }
      // let loadIndex = that.$layer.load();
      // that.$axios.post('', para).then((res) => {
      //   that.$layer.close(loadIndex);
      //   that.$layer.msg(res.data.message, { time: 1000 });
      //   if (res.data.code != 200) {
      //     return;
      //   }
      // }).catch((err) => {
      //   that.$layer.close(loadIndex);
      //   that.$layer.msg('提交失败,请重试', { time: 1000 });
      // });
    },
    changeTime(index) {
      this.timeIndex = index;
    },
    changeMoney(index) {
      this.moneyIndex = index;
    },
    changeType2(index) {
      this.typeIndex2 = index;
    },
    changeType1(index) {
      this.typeIndex1 = index;
    },
    changeTab(index) {
      this.tabIndex = index;
    },
    changeCollect(){
      this.collectFlag=!this.collectFlag;
    },
  },
});
</script>
<style module>
.buyModal {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 20px 10px;
  overflow-y: auto;
}

.topBlock {
  width: 100%;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
}

.topIcon {
  width: 50px;
  height: 54px;
}

.topInfo {
  width: calc(100% - 50px - 15px - 24px - 10px);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 15px;
}

.topName {
  font-family: Arial;
  font-size: 16px;
  font-weight: normal;
  line-height: 16px;
  color: #515A6E;
}

.topNum {
  display: flex;
  align-items: flex-end;
}

.topSpan1 {
  font-family: Arial;
  font-size: 18px;
  font-weight: normal;
  line-height: 18px;
  color: #13CE66;
}

.topSpan2 {
  font-family: Arial;
  font-size: 18px;
  font-weight: normal;
  line-height: 18px;
  color: #13CE66;
  margin-left: 8px;
}

.topCollect {
  width: 24px;
  height: 24px;
  cursor: pointer;
  margin-left: 10px;
}

.countBlock {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 9px;
}

.countLi {
  width: calc((100% - 15px) / 2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
  margin-left: 15px;
}

.countLi:nth-child(odd) {
  margin-left: 0;
}

.countText {
  font-family: Source Han Sans;
  font-size: 14px;
  font-weight: 300;
  color: #616266;
}

.countNum {
  font-family: Source Han Sans;
  font-size: 14px;
  font-weight: normal;
  color: #000000;
}

.tabBlock {
  width: 100%;
  height: 40px;
  background: #F0F2F5;
  border-radius: 3px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 5px;
  margin-bottom: 17px;
}

.tabItem {
  width: 50%;
  height: 100%;
  text-align: center;
  line-height: 30px;
  font-family: Source Han Sans;
  font-size: 14px;
  font-weight: 300;
  color: #515A6E;
  cursor: pointer;
}

.tabActive {
  background-color: #FFFFFF;
  border-radius: 3px;
  color: #1890FF;
}

.typeBox {
  width: 100%;
  height: 40px;
  background: #FFFFFF;
  border-radius: 3px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 5px;
  border: 1px solid #DCDFE6;
  margin-bottom: 17px;
}

.typeItem {
  width: 50%;
  height: 100%;
  text-align: center;
  line-height: 30px;
  font-family: Source Han Sans;
  font-size: 14px;
  font-weight: 300;
  color: #515A6E;
  cursor: pointer;
}

.typeActive1 {
  background-color: #EC5B56;
  border-radius: 3px;
  color: #FFFFFF;
}

.typeActive2 {
  background-color: #13CE66;
  border-radius: 3px;
  color: #FFFFFF;
}

.formTitle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.formLabel {
  font-family: Source Han Sans;
  font-size: 14px;
  font-weight: 300;
  color: #515A6E;
}

.formText {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  margin-bottom: 8px;
}

.formTextSpan1 {
  font-family: Source Han Sans;
  font-size: 14px;
  font-weight: 300;
  color: #909399;
}

.formTextSpan2 {
  font-family: Source Han Sans;
  font-size: 14px;
  font-weight: 500;
  color: #515A6E;
}

.formTip {
  width: 100%;
  text-align: center;
  font-family: Source Han Sans;
  font-size: 14px;
  font-weight: 300;
  color: #EC5B56;
  margin-top: 12px;
}

.chooseBox{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15px;
}
.chooseItem{  
  height: 36px;
  text-align: center;
  line-height: 36px;
  border-radius: 3px;
  background-color: #F5F6FA;
  font-family: Source Han Sans;
  font-size: 14px;
  font-weight: normal;
  color: #000000;
  cursor: pointer;
  margin-left: 5px;
  margin-bottom: 5px;
  margin-top: 8px;
}
.chooseItem1{
  width: calc((100% - 10px) / 3);
}
.chooseItem1:nth-child(3n+1){
  margin-left: 0;
}
.chooseItem2{
  width: calc((100% - 5px) / 2);
}
.chooseItem2:nth-child(2n+1){
  margin-left: 0;
}
.chooseActive{
  background-color: #E6E8EA;
  color: #000000;
}
</style>
<style scoped>
.layui-input-number {
  width: 100%;
  margin-top: 8px;
  margin-bottom: 20px;
}

.layui-btn {
  width: 100%;
  height: 40px;
  line-height: 40px;
  color: #FFFFFF;
}

.layui-btn.red {
  background-color: #EC5B56;
  border-color: #EC5B56;
}

.layui-btn.green {
  background-color: #13CE66;
  border-color: #13CE66;
}
</style>
